'use strict';
import React, {Component, PropTypes} from 'react';
import { connect } from 'react-redux';
import { Row, Col, InputNumber,Form } from 'antd';
import { setDeviceWidth } from '../../reducers/common/actions';

class ComponentBox extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        let stylePrev = {
            width:this.props.deviceWidth,
            minHeight:736,
            overflow:"hidden"
        };
        return (
            <div>
                <div className="prevTools" style={{width:414}}>

                    <Row>
                        <Col span={24}>
                            <Form.Item
                                label="模拟器宽度"
                                labelCol={{ span: 5 }}
                                wrapperCol={{ span: 12 }} >
                                <InputNumber
                                             min={300}
                                             step={10}
                                             max={800}
                                             defaultValue={this.props.deviceWidth}
                                             onChange={::this.onChangeDeviceWidth} />
                            </Form.Item>
                        </Col>
                    </Row>
                </div>
                <div className="prev" style={stylePrev}>
                    {this.props.children}
                </div>
            </div>
        );
    }
    onChangeDeviceWidth(val){
        this.props.setDeviceWidth(val);
    }
}

export default connect(
    state =>{
        return {
            deviceWidth:state.common.deviceWidth
        };
    },
    dispatch =>{
        return {
            setDeviceWidth: (value) => dispatch(setDeviceWidth(value)),
        };
    }
)(ComponentBox);